<template>
    <div class="express_dispatch noworder">
        <div class="noworder-title">
            <span>当前运单概览</span>
            <el-tooltip class="item" effect="dark" content="当前运单是指所有未送达和今日已送达的订单" placement="top">
                <img src="../../../../assets/img/question.png" alt="" style="width:16px;vertical-align: -3px;margin-left: 10px">
            </el-tooltip>
        </div>
        <div style="padding: 20px 26px;">
            <div class="itembox-contents">
                <progress-circle :diameter="130" :circle-color="'#E0E4EB'" :start-color="'#F12F1D'" :circle-width="8" :stop-color="'#F12F1D'" :completed-steps="objData.abnormal_order_count" :total-steps="objData.total_order_count">
                    <div class="title">超时</div>
                    <div class="num">{{objData.abnormal_order_count}}</div>
                </progress-circle>
                <progress-circle :diameter="130" :circle-color="'#E0E4EB'" :start-color="'#1989FA'" :circle-width="8" :stop-color="'#1989FA'"  :completed-steps="objData.third_party_order_count" :total-steps="objData.total_order_count">
                    <div class="title">三方配送</div>
                    <div class="num">{{objData.third_party_order_count}}</div>
                </progress-circle>
                <progress-circle :diameter="130" :circle-color="'#E0E4EB'" :start-color="'#FBC445'" :circle-width="8" :stop-color="'#FBC445'"  :completed-steps="objData.update_order_count" :total-steps="objData.total_order_count">
                    <div class="title">修改</div>
                    <div class="num">{{objData.update_order_count}}</div>
                </progress-circle>
                <progress-circle :diameter="130" :circle-color="'#E0E4EB'" :start-color="'#F4AEAE'" :circle-width="8" :stop-color="'#F4AEAE'" :completed-steps="objData.cadence_order_count" :total-steps="objData.total_order_count">
                    <div class="title">终止</div>
                    <div class="num">{{objData.cadence_order_count}}</div>
                </progress-circle>
                <progress-circle :diameter="130" :circle-color="'#E0E4EB'" :start-color="'#FF5722'" :circle-width="8" :stop-color="'#FF5722'"  :completed-steps="objData.back_order_count" :total-steps="objData.total_order_count">
                    <div class="title">退回</div>
                    <div class="num">{{objData.back_order_count}}</div>
                </progress-circle>
                <progress-circle :diameter="130" :circle-color="'#E0E4EB'" :start-color="'#9013FE'" :circle-width="8" :stop-color="'#9013FE'"  :completed-steps="objData.reject_order_count" :total-steps="objData.total_order_count">
                    <div class="title">取消</div>
                    <div class="num">{{objData.reject_order_count}}</div>
                </progress-circle>
            </div>
            <lar-table
                    model="express.order"
                    canAdd="canAdd"
                    action="base.table.noworder"
                    @handelButton="handelButton"
                    style="margin-top: 20px">
                <div slot="nowOrder" style="border-bottom: 1px solid #ebeef5;position:relative;top: -1px;margin:0 -30px;padding-left: 30px">
                    <el-radio-group v-model="current">
                        <el-radio-button :label="tab.type" v-for="(tab,index) in navList" :key="index">
                            {{tab.name}} ({{tab.count}})
                        </el-radio-button>
                    </el-radio-group>
                </div>
            </lar-table>
        </div>

    </div>

</template>
<script>
    import { ProgressCircle } from 'vue-progress-circle';
    import {manyHander} from '../../../../init/handerButton'

    export default {
      mixins:[manyHander],
      props: {
            navList: {
                type: Object | Array,
                default: () => {
                    return []
                }
            },
            objData: {
                type: Object | Array,
                default: () => {
                    return []
                }
            }
        },
        components: {
            ProgressCircle
        },
        data() {
            return {
                current: '-1'
            }
        },

        watch: {
            current: function (newValue) {
                let data = {
                    orderStatus: {
                        value: newValue,
                        searchModel: "equal"
                    }
                };
                this.$store.commit('pipe', {'value': data, 'name': 'express.order.table'});
            }
        },
        created() {
          // setTimeout(()=>{
              let data = {
                  orderStatus: {
                      value: this.current,
                      searchModel: "equal"
                  }
              };
              this.$store.commit('pipe', {'value': data, 'name': 'express.order.table'});
          // },1000)

        }
    }
</script>
<style lang="less">
    .express_dispatch {
        .noworder-title{
            font-size:16px;
            height: 42px;
            line-height: 42px;
            border-bottom: 2px solid #FAFAFA;
            color:rgba(0,0,0,0.85);
            padding-left: 16px;
            margin-top: 10px;
        }
        .itembox-contents{
            display: flex;
            justify-content: space-around;
            padding: 20px 0;
            .title{
                font-size: 16px;
            }
            .num{
                font-size:30px;
            }
        }
        .el-badge__content.is-fixed {
            right: 2px !important;
        }
        .el-radio-button__inner {
            padding: 12px 25px;
        }
        .lar-table {
            margin-top: 0;
        }
        .el-tabs__header {
            margin-bottom: 5px;
        }
        .el-tabs__nav-wrap {
            padding-left: 10px;
        }
    }
    .noworder{
        margin-top: 10px;
        .lar-table{
            .el-table{
                padding-top: 40px;
            }
            .el-table__fixed-right{
                top: 40px;
                box-shadow: 0 5px 10px rgba(0,0,0,0.12);
            }
        }
    }
</style>

